<template>
<div class="logo">
  <my-header></my-header>
  <div style="width:100%">

  <!-- 轮播图 -->
    <div id="silder-box">
      <div class="silder-img">
        <ul> 
            <li><img src="http://www.yhachina.com/data/images/2018-07-02/5b39db2f01e23.jpg" ></li>
            <li><img src="http://www.yhachina.com/data/images/2018-07-02/5b39db4a5af97.jpg" ></li>
            <li><img src="http://www.yhachina.com/data/images/2018-07-02/5b39db3b8c308.jpg" ></li>
        </ul>
      </div>
    <div class="date_place">
      <form action="" id="frmQuery">
        <dd class="place">
          <!-- <input type="text" id="place1" placeholder="您想去哪里"> -->
          <el-input v-model="input" placeholder="您想去哪里"></el-input>
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="入住日期">
            </el-date-picker>
          </div>
          <div class="block">
            <el-date-picker
              v-model="value2"
              align="right"
              type="date"
              placeholder="退房日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <!-- <button>搜索</button> -->
          <div class="button">
            <el-button type="success">搜索</el-button>
          </div>
          
        </dd>
      </form>
    </div>
    </div>

  <!--  -->
  <div class="yha_a">
    <div class="banner_map">
        <img src="https://www.yhachina.com/data/images/2019-06-25/5d11a3c958143.jpg" alt="">
    </div>
    <!--  -->
    <div class="w1080 clearfix" style="width:1080px">
      <div class="yha_a_l fl">
        <div class="yha_a_l_1">
          <h3>会员卡</h3>
          <p>更多优惠，更多机会。一卡在手，走遍全球。<a href="">了解更多</a></p>
          <router-link to="/apply" class="yha_a_btn">办理会员卡</router-link>
          <router-link to="/continue" class="yha_a_btn">续卡</router-link>
          <div class="card-discount"></div>
        </div>
        <div class="yha_a_l_2">
          <h3>旅舍加盟</h3>
          <p>
            <a href="">青年旅舍 <font style="vertical-align:super;font-size:50%; ">®</font>与酒店的不同</a>
            <a href="">加盟流程图</a>
            <a href="">加盟费用</a>
            <br>
            <a href="">问与答</a>
            <a href="">更多</a>
          </p>
          <router-link to="/join" href="" class="yha_a_btn">申请加盟</router-link>
        </div>
      </div>
      <div class="yha_a_r fr">
        <h3>青年旅舍<font style="vertical-align:super;font-size:50%; ">®</font>查询</h3>
        <p>近200家旅舍遍布全国27个省市自治区和直辖市的各主要城市。
          <br>
          点击地图省份，选择你喜爱的旅舍
        </p>
        <br>
          <!--  -->
          <router-link to="/province"><my-china>></my-china></router-link>
        </div>
      </div>
    </div>
   <!--  -->
   <div class="news-bg">
    <div class="index_title">
     <h2>最新活动</h2>
     <p>精心策划的青旅活动，期待你的参与</p>
    </div>
    <div class="picScroll" style="margin:0 auto">
    <div class="bd">
    <a href="" class="prev"></a>
    <a href="" class="next"></a>
    <div class="scrollWrap">
      <div class="tempWrap" style="overflow:hidden; position:relative; width:1080px">
        <ul class="picList" style="width: 4320px; left: 0px; position: relative; overflow: hidden; padding: 0px; margin: 0px;">
          <li style="float: left; width: 270px;"><a href=""><img src="http://www.yhachina.com/data/images/2021-06-22/60d14bb392a61.jpg" alt=""></a></li>
          <li style="float: left; width: 270px;"><a href=""><img src="http://www.yhachina.com/data/images/2021-06-22/60d1620c3badf.jpg" alt=""></a></li>
            <li style="float: left; width: 270px;"><a href=""><img src="http://www.yhachina.com/data/images/2021-06-22/60d154679ba43.jpg" alt=""></a></li>
              <li style="float: left; width: 270px;"><a href=""><img src="http://www.yhachina.com/data/images/2020-07-28/5f1fdb9fb7406.jpg" alt=""></a></li>
        </ul>
      </div>
    </div>
      </div>
    </div>
    <a href="" class="all_btn">所有活动</a>
    <div class="w_dynamic">
      <div class="w1080 clearfix">
      <img src="http://www.yhachina.com/images/wechat-community.png" alt="">
      <div class="w_dynamic_l clearfix fl">
      <div class="w_dynamic_l_a fl">
       <h2>关注微信公众号</h2>
       <a href="" class="yha_a_btn" style=" display:inline;float: left;">YHA <font style="vertical-align:super;font-size:50%; ">®</font>中国</a>
       <a href="" class="yha_a_btn" style=" display:inline;float: left;">YHA <font style="vertical-align:super;font-size:50%; ">®</font>国际</a>
       <a href="" class="yha_a_btn" style=" display:inline;float: left;">旅行那些事</a>
      </div>
      <div class="w_dynamic_l_b fl">
      轻松实现手机
      <font style="font-weight:bold;">预订旅舍、办理会员卡</font><br>
     更有旅行攻略与推介、青旅人物与故事...     
      </div>
      </div>
      <div class="tpn">
        <img src="http://www.yhachina.com/images/tpnImg.jpg" alt="">
        <p>YHA<font style="vertical-align:super;font-size:50%; ">®</font>青年旅舍<font style="vertical-align:super;font-size:50%;">®</font>公众号</p>
      </div>
      </div>
    </div>
   </div>
   <!--  -->
   <div class="news">
    <div class="index_title">
      <h2>会员优惠 </h2>
      <p>你手中的会员卡，全世界都能打折</p>
    </div>
    <div class="picScroll2" style="margin:0 auto">
      <div class="bd">
      <a href="" class="prev"></a>
      <a href="" class="next"></a>
      <div class="scrollWrap">
        <div class="tempWrap" style="overflow:hidden; position:relative; width:1080px">
          <ul class="picList2" style="width: 4680px; left: 0px; position: relative; overflow: hidden; padding: 0px; margin: 10px;">
            <li style="float: left; width: 350px;"><a href=""><img src="http://www.yhachina.com/images/huiyuanyouhui/huiyuanbianhao_11.jpg" alt=""></a></li>
            <li style="float: left; width: 350px;"><a href=""><img src="http://www.yhachina.com/images/huiyuanyouhui/huiyuanbianhao_07.jpg" alt=""></a></li>
            <li style="float: left; width: 350px;"><a href=""><img src="http://www.yhachina.com/images/huiyuanyouhui/huiyuanbianhao_01.jpg" alt=""></a></li>
          </ul>
        </div>
      </div>
      </div>
    </div>
   </div>
   <!--  -->
   <div class="about_us">
    <div class="about_text w1080">
     <h2>关于我们——YHA <font style="vertical-align:super;font-size:50%; ">®</font>青年旅舍
     <font style="vertical-align:super;font-size:50%; ">®</font>
     </h2>
     <p class="p1">我们提倡<i></i></p>
     <p class="p2">文化交流、舍会责任、实践环保、爱护大自然、<br>
     简朴而高素质生活、自助及助人。
     </p>
     <a href="">了解更多</a>
    </div>
    <div style="margin-top:30px" class="w1080 movie">
      <router-link to="/web-info-lists/jchd"><img src="http://www.yhachina.com/images/demo/movie-poster.jpg" alt=""></router-link>
    </div>
   </div>
   <!--  -->
   <div class="app-box">
    <div class="w1080">
    <h2>中国国际青年旅舍<font style="vertical-align:super;font-size:50%; ">®</font>手机版</h2>
    <p>无论您置身何处皆可搜索附近的旅舍，通过手机预订全国青年旅舍 <font style="vertical-align:super;font-size:50%; ">®</font>，简单而又安全的预订过程<br>
    将旅舍、订单细节储存在您的手机，给您独一无二的云体验
    </p>
    <div class="app-qr">
      <img src="http://www.yhachina.com/images/Android_2018.png" alt="" width="140">
      <p>扫描二维码直接安装</p>
    </div>
    </div>
   </div>
  
</div>
<my-footer></my-footer>
</div>

</template>

<script>
import MyHeader from '@/components/MyHeader.vue';
import MyFooter from '@/components/MyFooter.vue';
import MyChina from '@/components/MyChina.vue';

export default {
  components: { MyHeader, MyFooter,MyChina },
  data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }]
        },
        value1: '',
        value2: '',
      };
    }
};
</script> 




<style lang="scss" >
 * {
  margin: 0;
  padding: 0;
  }
a{
  text-decoration: none;
}
 #silder-box{
width: 100vw;
height: 550px;
  }
#silder-box ul li{
  width: 100vw;
  // height: 550px;
}
  #silder-box ul {
    // height: 500px;
    position: relative;
  }
 #silder-box ul li {
  position: absolute;
  list-style: none;
  }
 #silder-box li img {
   width: 100vw;
  }
 #silder-box ul>li:nth-child(4) {
  animation: li4 8s infinite;
  }
 #silder-box ul>li:nth-child(3) {
  animation: li3 8s infinite;
  }
 #silder-box ul>li:nth-child(2) {
  animation: li2 8s infinite;
  }
 #silder-box ul>li:nth-child(1) {
  animation: li1 8s infinite;
  }
 @keyframes li4{
  0%{opacity: 1;}
  20%{opacity: 0;}
  75%{opacity: 0;}
  }
 @keyframes li3{
  25%{opacity: 1;}
  45%{opacity: 0;}
  75%{opacity: 0;}
  }
 @keyframes li2{
  50%{opacity: 1;}
 70%{opacity: 0;}
 75%{opacity: 0;}
 }
 @keyframes li1{
  75%{opacity: 1;}
  95%{opacity: 0;}
  }
  .date_place{
    width: 1000px;
    height: 50px;
    position: absolute;
    left: 50%;
    bottom: 10px;
    margin-left: -540px;
    top: 519px;
    border-radius: 3px;
  }
.place{
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 position: absolute;
 top: -30px;
}
.place .block{
  zoom:1;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 300px;
}
.el-input__inner{
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 50px;
    line-height: 40px;
    outline: 0;
    // padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
.place input{
  width: 330px !important;
  height: 50px;
}
  // input:nth-child(1){
  //   width: 400px;
  //   // height: 50px;
  //   text-indent: 20px;
  // }
  // input:nth-child(2){
  //   width: 238px;
  //   height: 50px;
  // }
  // input:nth-child(3){
  //   width: 238px;
  //   height: 50px;
  // }
.place button{
  width: 150px;
  height: 50px;
  zoom: 1;
  background-color: #87C524;
  padding: 16px 10px;
  border: none;
  border-radius: 0 5px 5px 0;
  font-size: 12px;
}
.banner_map {
width: 1180px;
height: 197px;
    padding-top: 25px;
    margin-bottom: 90px;
    margin: 0 auto;
}
.banner_map img{
  width: 100%;
}
.yha_a{
  width: 1520px;
  height: 1100px;
  position: relative;
  background: url(http://www.yhachina.com/images/yha_a.gif) no-repeat center;

}
.banner_map{
  padding-top: 25px;
  margin-bottom: 90px;
}
.w1080{
  width: 1080px;
  // height: 800px;
  // margin: 0 auto;
}
.yha_a{
  margin: 0 auto;
}
.yha_a_l{
  width: 540px;
}
.fl{
  float: left;
}
.yha_a_l_1{
  width: 540px;
  height: 280px;
  position: relative;
}
.news-bg{
  margin-top: -100px;
}
.yha_a_l_1 h3{
  font-size: 40px;
}
.yha_a_l_1 p{
    font-size: 16px;
    color: #999;
    margin: 15px 0 35px;
}
.yha_a p{
  line-height: 180%;
}
.yha_a_l p a {
    font-size: 16px;
    color: #333;
}
.yha_a_l .yha_a_btn {
    font-size: 16px;
    color: #fff;
    text-align: center;
    display: inline-block;
    border-radius: 20px;
    background-color: #87c524;
    width: 120px;
    height: 35px;
    line-height: 35px;
    margin-right: 25px;
}
.yha_a_l .yha_a_btn a {
    text-decoration: none;
}
.yha_a_l .card-discount {
  background-image: url(http://www.yhachina.com/css/app_z.png);
    width: 291px;
    height: 115px;
    position: absolute;
    bottom: 2px;
    right: 0;
    background-repeat: no-repeat;
}
.yha_a_l_2 {
    margin-top: 80px;
    width: 540px;
    height: 211px;
}
.yha_a_l_2 h3{
  font-size: 40px;
}
.yha_a_l p {
    font-size: 16px;
    color: #999;
    margin: 15px 0 35px;
}
.yha_a p{
  line-height: 180%;
}
.yha_a_l_2 p a:nth-child(1) {
    border-color: #f7941c;
}
.yha_a_l_2 p a {
    text-decoration: none;
    margin-right: 30px;
}
.yha_a_l p a {
    font-size: 16px;
    color: #333;
}
.yha_a_l_2 a {
    display: inline-block;
    border-left-style: solid;
    border-left-width: 2px;
    padding-left: 5px;
    line-height: 100%;
}
.yha_a_l_2 p a:nth-child(2) {
    border-color: #1c6ef7;
}
.yha_a_l_2 p a {
    text-decoration: none;
    margin-right: 30px;
}
.yha_a_l p a {
    font-size: 16px;
    color: #333;
}
.yha_a_l_2 a {
    display: inline-block;
    border-left-style: solid;
    border-left-width: 2px;
    padding-left: 5px;
    line-height: 100%;
}
.yha_a_l_2 p a:nth-child(3) {
    border-color: #f7c61c;
}

.yha_a_l_2 p a {
    text-decoration: none;
    margin-right: 30px;
}
.yha_a_l p a {
    font-size: 16px;
    color: #333;
    text-decoration: underline;
}
.yha_a_l_2 a {
    display: inline-block;
    border-left-style: solid;
    border-left-width: 2px;
    padding-left: 5px;
    line-height: 100%;
}
.yha_a_l_2 p a {
    text-decoration: none;
    margin-right: 30px;
}

.yha_a_l p a {
    font-size: 16px;
    color: #333;
    text-decoration: underline;
}
.yha_a_l_2 a {
    display: inline-block;
    border-left-style: solid;
    border-left-width: 2px;
    padding-left: 5px;
    line-height: 100%;
}
.yha_a_l_2 a.more {
    border-color: #b2b2b2;
    margin-top: 15px;
}

.yha_a_l_2 p a {
    text-decoration: none;
    margin-right: 30px;
}
.yha_a_l p a {
    font-size: 16px;
    color: #333;
}
.yha_a_l_2 a {
    display: inline-block;
    border-left-style: solid;
    border-left-width: 2px;
    padding-left: 5px;
    line-height: 100%;
}
.yha_a_r {
    width: 530px;
}
.fr {
    float: right;
}
.yha_a_r h3, .yha_a_r p {
    padding-left: 40px;
}
.yha_a h3 {
    font-size: 40px;
    height: 60px;
}
.yha_a_r h3, .yha_a_r p {
    padding-left: 40px;
}
.yha_a p {
    font-size: 16px;
    color: #999;
    line-height: 180%;
}
.yha_a .book-aboard {
    position: absolute;
    width: 422px;
    right: -137px;
    height: 138px;
    background: url(http://www.yhachina.com/images/book-aboard.png) no-repeat center;
    margin-right: 230px;
    margin-top: 442px;
}
.news-bg {
    background: url(http://www.yhachina.com/images/news-bg.jpg) no-repeat center;
    height: 1149px;
}
.news-bg .index_title {
    color: #fff;
    margin-bottom: 55px;
}
.index_title {
    text-align: center;
    font-size: 40px;
    line-height: 100%;
}
.index_title h2 {
    padding-top: 115px;
}
.index_title p {
    font-size: 18px;
    padding-top: 15px;
}
.picScroll{
  width: 1250px;
}
.picScroll .bd {
  position: relative;
}
.picScroll .bd .prev{
  background-image: url(http://www.yhachina.com/css/app_z.png);
}
.picScroll .prev {
    background-position: -291px -90px;
}
.picScroll .prev {
    left: -0;
    background-repeat: no-repeat;
}
.picScroll .bd .next{
  background-image: url(http://www.yhachina.com/css/app_z.png);
}
.picScroll .prev, .picScroll .next {
    display: block;
    width: 82px;
    height: 82px;
    position: absolute;
    top: 50%;
    margin-top: -41px;
    cursor: pointer;
    text-indent: -999em;
    overflow: hidden;
}
.picScroll .next {
    background-position: 0px -230px;
}
.picScroll .next {
    right: -0;
    background-repeat: no-repeat;
}

.picScroll .prev, .picScroll .next {
    display: block;
    width: 82px;
    height: 82px;
    position: absolute;
    top: 50%;
    margin-top: -41px;
    cursor: pointer;
    text-indent: -999em;
    overflow: hidden;
}
.picScroll .tempWrap {
    margin: 0 auto;
    height: 630px;
}
.picScroll ul {
    overflow: hidden;
    zoom: 1;
    height: 630px;
}
ol, ul {
    list-style: none;
}
.picScroll li{
  margin-top: 50px;
  position: relative;
}
.picScroll li:nth-child(2n) {
    margin-top: 135px;
}
.all_btn {
    display: block;
    background-color: #fff;
        border-radius: 30px;
    width: 140px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #87c524;
    margin: 50px auto 0;
}
.news-bg .w_dynamic {
    height: 238px;
    background: url(http://www.yhachina.com/images/w_dynamic.png) no-repeat center top;
    position: relative;
    bottom: -70px;
    width: 1120px;
    margin: 0 auto;
}
.w1080 {
    width: 1080px;
    margin: 0 auto;
    position: relative;
}
.news-bg .w_dynamic .w1080 img{
  position: absolute;
margin-top: 50px;
margin-left: 72px;
}

.news-bg .w_dynamic_l {
    margin: 51px 0 0 215px;
}
.fl {
    display: inline;
    float: left;
}
.fl {
    float: left;
}
.news-bg .w_dynamic_l_a h2 {
    color: #333;
    font-family: "Microsoft YaHei","tahoma","arial","Hiragino Sans GB","宋体";
    font-size: 40px;
}
.news-bg .w_dynamic_l_a a {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    width: 120px;
    height: 35px;
    margin-right: 20px;
    line-height: 35px;
    border-radius: 30px;
    background-color: #87c524;
    text-align: center;
    margin-top: 15px;
}

.news-bg .w_dynamic_l_b {
    font-size: 14px;
    color: #666;
     margin: 1px 0 0 -125px;
     line-height: 21px;
}
.news-bg .w_dynamic .tpn {
    height: 180px;
    float: right;
    background-color: #f5f5f5;
    width: 180px;
     text-align: center;
    font-size: 14px;
    color: #333;
    position: relative;
}
.news-bg .w_dynamic .tpn img {
    margin-left: -50px;
    margin-top: 31px;
}
.news-bg .w_dynamic .tpn p{
  position: absolute;
  margin-top: 138px;
  margin-left: 15px;
}
// /////////
.news .index_title {
    margin: 80px 0;
}
.index_title {
    text-align: center;
    font-size: 40px;
    line-height: 100%;
}
.index_title h2 {
    padding-top: 115px;
}
.index_title p {
    font-size: 18px;
    padding-top: 15px;
}
.picScroll2 {
    width: 1250px;
}
.picScroll2 .bd {
    position: relative;
}
.picScroll2 .prev {
  background-image: url(http://www.yhachina.com/css/app_z.png);
    background-position: -82px -230px;
}
.picScroll2 .prev {
    left: -0;
    background-repeat: no-repeat;
}
.picScroll2 .next {
    background-image: url(http://www.yhachina.com/css/app_z.png);
    background-position: -164px -230px;
}

.picScroll2 .next {
    right: -0;
    background-repeat: no-repeat;
}
.picScroll2 .prev, .picScroll2 .next {
    display: block;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}
.picScroll2 .tempWrap {
    margin: 0 auto;
}
.about_us {
    height: 646px;
    background: url(http://www.yhachina.com/images/about-bg.jpg) no-repeat center;
}
.about_text {
    padding-top: 130px;
    font-size: 16px;
}
.w1080 {
    width: 1080px;
    margin: 0 auto;
}
.about_text h2 {
    font-size: 34px;
    color: #333;
}
.about_text .p1 {
    color: #87c524;
    position: relative;
    margin: 25px 0 10px;
}
.about_text .p1 i {
    display: block;
    width: 365px;
    height: 1px;
    background-color: #e7f3d8;
    position: absolute;
    top: 50%;
    left: 85px;
}
.about_text .p2 {
    color: #333;
    line-height: 24px;
}
.about_text a {
    display: block;
    width: 100px;
    padding: 7px 0;
    border-radius: 20px;
    border: 1px solid #bbb;
    text-align: center;
    color: #666;
    margin-top: 35px;
}
.w1080 {
    width: 1080px;
    margin: 0 auto;
}
.app-box {
    background: url(http://www.yhachina.com/images/app-bg.jpg) no-repeat center;
    height: 863px;
}
.w1080 {
    width: 1080px;
    margin: 0 auto;
}
.app-box h2 {
    font-size: 40px;
    color: #000;
    padding-top: 180px;
}
.app-box p {
    color: #999;
    font-size: 14px;
    line-height: 22px;
    margin: 30px 0;
}
.app-box .app-qr {
    text-align: center;
    width: 115px;
    margin-top: 30px;
}
.app-box .app-qr p {
    margin: 0;
    font-size: 12px;
}
.app-box p {
    color: #999;
    line-height: 22px;
}
.el-date-picker__header{
  background-color: #78BA32;
  border-radius: 5px;
}
.el-date-table td.current:not(.disabled) span{
  background-color: #78BA32;
}
.el-date-table td.today span{
  color: #333;
}
</style>